<template>
  <div class="box">
      <MyMtHeader titleText="我的收藏"/>
      <div class="main">
          <div class="item" v-for="(item,index) in itemList" :key="index">
                <mt-cell >
                    <img slot="icon"  :src= "item.img" width="96px" height="96px">
                    <div class="value">
                        <p class="text">{{item.text}}</p>
                        <div class="bottom">
                            <div class="bottom-left">￥{{item.price}}</div>
                            <div class="bottom-right"><button class="btn">删除</button></div>
                        </div>
                    </div>
                </mt-cell>
          </div>
      </div>
  </div>
</template>

<script>
import MyMtHeader from '../MyMtHeader/MyMtHeader.vue'
export default {
    components: { MyMtHeader },
    data(){
        return {
            itemList:[
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/97812ce7d175451484ce43705ad6d5c3.jpg',
                    text:'密园小农  密云当地新鲜西红柿 约2kg 自然熟 沙瓤 新鲜蔬菜',
                    price:67.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/97812ce7d175451484ce43705ad6d5c3.jpg',
                    text:'密园小农  密云当地新鲜西红柿 约2kg 自然熟 沙瓤 新鲜蔬菜',
                    price:67.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/97812ce7d175451484ce43705ad6d5c3.jpg',
                    text:'密园小农  密云当地新鲜西红柿 约2kg 自然熟 沙瓤 新鲜蔬菜',
                    price:67.5
                },
            ]
        }
    }
}
</script>

<style scoped>
.box{
    background: #e7e8e861;
}
.item{
    margin: 16px 0px;
}

.text{
    text-align: left;
    font-size: 16px;
    color: #000;
}
.bottom{
    display: flex;
    justify-content: space-between;
    line-height: 32px;
}
.bottom-left{
    font-size: 19px;
    color: #FF0000;
}
.btn{
    width: 4em;
    height: 2em;
    float: right;
    background: no-repeat;
    border: 1px solid #e6e6e6;
    border-radius: 1em;
}
</style>